{extend name="layout/layout"}
{block name="content"}
<main class="active">
    <div class="head_a1">
        <div class="layui-main">
            <div class="b1">
                <div class="t1">步驟一：活動資訊( 嘉賓介紹 )</div>
                <a href="/" class="back_btn"><img src="__ROOT__/public/activity/images/out.png">返回首页</a>
            </div>
        </div>
    </div>
    <div class="main_a">
        <div class="layui-main">
            <div class="active_w active3 ">
                <p class="text-align-center ft18 mb40 ft-bold">快來介紹你的嘉賓有多厲害！</p>
                <from class="layui-form">
                    <div class="content">
                        <ul class="layui-row layui-col-space60 ul_height a8_ul1">
                            {foreach $vo as $key => $guest}
                            <li class="layui-col-md3 layui-col-xs4 " style="cursor: pointer">
                                <div class="item">
                                    <div class=" img img_box guest-item" data-id="{$key}">
                                        <img class="layui-circle"
                                             src="{$guest.profile|default='__ROOT__/public/activity/images/userp.png'}">
                                    </div>
                                    <p>{$guest.username|default=''}</p>
                                </div>
                            </li>
                            {/foreach}

                            <li class="layui-col-md3 layui-col-xs4">
                                <div class="item" data-btn="add">
                                    <div class=" img img_box">
                                        <img class="layui-circle" src="__ROOT__/public/activity/images/add.jpg">
                                    </div>
                                    <p>新增嘉賓</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </from>
                <div class="mt100 d-flex jc-s al-c">
                    <a href="/activity/create/content.html" class="last-btn">
                        <img src="__ROOT__/public/activity/images/out1.png">返回上一步
                    </a>
                    <a href="javascript:;" onclick="goNext()">
                        <button class="layui-btn layui-bg-orange next-btn">下一步</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</main>
<div class="layui-hide"> 
    <div class="addhtml ">
        <div class="active_w active8 ">
            <form class="layui-form" lay-filter="add-form">
                <div class=" flex-center mb60">
                    <div class="user_upload">
                        <div class="user_img">
                            <img src="__ROOT__/public/activity/images/userp.png" id="upload-img">
                        </div>
                        <div id="upload-btn" class="btn">
                            <img class="layui-circle" src="__ROOT__/public/activity/images/upload.png">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label must">嘉賓姓名</div>
                    <div class="">
                        <input type="text" name="username" lay-verify="required" placeholder="请填写嘉賓姓名"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label must">職稱
                    </div>
                    <div class="">
                        <input type="text" name="posit" lay-verify="required" placeholder="请填写嘉賓職稱"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label must">公司名稱
                    </div>
                    <div class="">
                        <input type="text" name="company_name" lay-verify="required" placeholder="请填写嘉賓公司名稱"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label ">嘉賓簡介
                    </div>
                    <div class="">
							<textarea name="user_desc" lay-verify="required" class="layui-textarea"
                                      style="min-height: 3rem;" placeholder="请填写嘉賓嘉簡介"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label ">嘉賓網址<p class=" tip1">可以加上嘉賓的 Facebook、Instagram、Twitter 等</p>
                    </div>
                    <div class="">
                        <input type="text" name="guest_website" lay-verify="" placeholder="请填写嘉賓網址" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="mt40 d-flex jc-c al-c">
                    <button class="layui-btn layui-bg-orange next-btn">新增嘉宾</button>
                </div>
            </form>
        </div>
        <div class="flex-column-center">

        </div>

    </div>
</div>
<script>

    var addhtml = $('.addhtml')[0].outerHTML;
    $(document).on('click', '[data-btn="add"]', function () {

        layui.use(function () {
            var upload = layui.upload;
            var layer = layui.layer;
            var element = layui.element;
            var $ = layui.$;

            layer.open({
                type: 1, // page 层类型
                area: ['900px', '80%'],
                title: false,
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: addhtml,
                success(elem) {
                    var profile = '';
                    //文件上传
                    upload.render({
                        elem: elem.find('#upload-btn'),
                        url: '/api/upload', // 实际使用时改成您自己的上传接口即可。
                        before: function (obj) {
                            // 预读本地文件示例，不支持ie8
                            obj.preview(function (index, file, result) {
                                elem.find('#upload-img').attr('src', result); // 图片链接（base64）
                            });
                        },
                        done(res) {
                            if (res.code === 1) {
                                profile = res.data.url;
                            } else {
                                layui.layer.msg(res.msg, {icon: 2})
                            }

                        }

                    })
                    //表单提交
                    var addForm = elem.find('.layui-form');
                    addForm.on('submit', function () {
                        var data = layui.form.val('add-form');
                        data.profile = profile;
                        $.quickPost('{:url("/activity/create/guest")}?type=add', data).done((res) => {
                            location.reload();
                        })
                        return false;
                    })

                }
            });

            element.init();
        })

    })
    var dropdown = layui.dropdown;

    //执行菜单
    dropdown.render({
        elem: '.guest-item' //在 id="demo" 的元素中触发事件。也可以直接设置为 document，从而重置整个右键菜单
        , trigger: 'click' //右键事件
        , data: [{title: '删除'}],
        click:function (data,othis){
            var id = $(this.elem).data('id');
            $.quickPost('{:url("/activity/create/guest")}?type=delete', {id:id}).done(()=>{
                location.reload();
            })
        }
    });
    function goNext(){
        location.href="{:url('/activity/create/ticket')}";
    }

</script>
{/block}